import BlockButton from '@/components/BlockButton';
import Dialog from '@/components/Dialog';
import { AppContext } from '@/store/index.context';
import React, { useContext, useMemo } from 'react';
import classes from './index.module.css';

export default function MergeScores({
  mergeResult,
  handleClose,
}: {
  mergeResult: { [key: string]: number };
  handleClose: () => void;
}) {
  const { personStore } = useContext(AppContext);
  const { getPersonById } = personStore;
  const infos = useMemo(() => {
    const result: { name: string; id: string; score: number }[] = [];
    Object.entries(mergeResult).forEach(([id, score]) => {
      const person = getPersonById(id);
      if (person) {
        result.push({ name: person.name, id: person.id, score });
      }
    });
    return result;
  }, [getPersonById, mergeResult]);

  return (
    <Dialog title="合计算分">
      <div className={classes.MergeScores}>
        {infos.map(info => (
          <div key={info.id}>
            {info.name} {info.score}
          </div>
        ))}
        <div className={classes.FooterButtons}>
          <BlockButton text="确定" type="primary" onClick={handleClose} />
        </div>
      </div>
    </Dialog>
  );
}
